import React from "react";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";
import { MorphingText } from "@/components/magicui/morphing-text";
import { FlipWords } from "@/components/ui/flip-words";
import Image from "next/image"
import { assets } from "../assets/assets";
 

const Header3DCard = () => {
  const words = ["Benny","刘江龙"];

  return (
    <CardContainer className="inter-var">
      <CardBody className="bg-gray-50 relative group/card  dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border  ">
        <CardItem
          translateZ="50"
          className="text-xl font-bold text-neutral-600 dark:text-white"
        >
          My name is:
        </CardItem>
        <CardItem
          as="p"
          translateZ="100"
          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300 text-center w-full border-b-4 border-gray-400 mx-auto"
        >
          <FlipWords  className={'md:text-6xl lg:text-7xl font-bold'} words={words} duration={1000}/>
        </CardItem>
        <CardItem translateZ="60" className="mt-4 text-xl font-bold text-neutral-600 dark:text-white">
          I'm a/an:
        </CardItem>
        <CardItem
          as="p"
          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300 text-center"
        >
          <MorphingText texts={['Student', 'Developer', 'Singer', 'Youtuber']}/>
        </CardItem>
        <div className="flex justify-between items-center mt-6">
          <CardItem
            translateZ={20}
            as="a"
            href="#contact"
            target="__blank"
            className="px-10 py-3 border border-white rounded-full bg-black text-white flex items-center gap-2 dark:bg-transparent"
          >
            Contact me<Image src={assets.right_arrow_white} alt="" className="w-4" />
          </CardItem>
          <CardItem
            translateZ={20}
            as="a"
            href='/sample-resume.pdf'
            className="px-10 py-3 border rounded-full border-gray-500 flex items-center gap-2 bg-white dark:text-black"
          >
            My resume <Image src={assets.download_icon} alt="" className="w-4" />
          </CardItem>
        </div>
      </CardBody>
    </CardContainer>
  )
}

export default Header3DCard
